<template>
    <div id="main-box">
        <van-nav-bar
                :title=this.title
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
        />
        <van-popup v-model="showType" closeable transition-appear position="bottom" :style="{ height: '40%' }">
         <div style="font-size:16px;font-weight: bold;margin-top: 15px;text-align: center">货物状态</div>
            <div style="font-size:14px;margin-top:20px;margin-left:10px">
            <van-radio-group v-model="radio">
                <van-radio name="未收到货" >未收到货</van-radio>
                <van-radio name="已收到货" style="margin-top:20px">已收到货</van-radio>
            </van-radio-group>
            </div>
            <van-button round style="background-color:rgb(255,119,1);color:white;width:80%;margin-top: 70px;margin-left:30px" @click="typeOk()">完成</van-button>
        </van-popup>

        <van-popup v-model="showCause" closeable transition-appear position="bottom" :style="{ height: '40%' }">
            <div style="font-size:16px;font-weight: bold;margin-top: 15px;text-align: center">退款原因</div>
            <div style="font-size:14px;margin-top:20px;margin-left:10px">
                <van-radio-group v-model="cause">
                    <van-radio name="包装/商品破损/污渍" >包装/商品破损/污渍</van-radio>
                    <van-radio name="质量问题" style="margin-top:10px">质量问题</van-radio>
                    <van-radio name="少件/漏发" style="margin-top:10px" >少件/漏发</van-radio>
                    <van-radio name="卖家发错货" style="margin-top:10px">卖家发错货</van-radio>
                    <van-radio name="商品信息描述不符" style="margin-top:10px" >商品信息描述不符</van-radio>
                </van-radio-group>
            </div>
            <van-button round style="background-color:rgb(255,119,1);color:white;width:80%;margin-top:10px;margin-left:30px" @click="causeOk()">完成</van-button>
        </van-popup>

        <div>
            <van-cell title="货物状态" is-link :value="radio" @click="goodsType" v-show="showTypeRidio" />
        </div>
        <div>
            <van-cell title="退款原因" is-link :value="cause" @click="causeType"/>
        </div>
        <div>
            <van-cell title="退款金额">
                <div>
                <span style="color:orangered;">￥<span style="font-size: 30px;">{{pay}}</span></span>
                </div>
                <div style="font-size:6px;color:#969799;">不可修改,最多￥{{pay}}</div>
            </van-cell>
        </div>
        <van-button round style="background-color:rgb(255,119,1);color:white;width:80%;margin-top: 70px;margin-left:30px" @click="putSubmit">提交</van-button>
    </div>
</template>

<script>
    import { Toast } from 'vant';
    import { putRefund } from "@/api/api"
    export default {
        name: "requestRefund",
        data(){
            return{
                showType:false,
                radio: '',
                title:"",
                showTypeRidio:true,
                uuid:'',
                pay:'',
                showCause:false,
                cause:""
            }

        },
        created() {
            this.uuid=this.$route.query.uuid;
            this.pay=this.$route.query.pay;
            if(this.$route.query.type==1){
                this.title="申请退款"
               this.showType=true
                this.showTypeRidio=true
            }else{
                this.title="申请退货退款"
               this.showTypeRidio=false
            }

        },
        methods:{
            putSubmit(){
                if(this.$route.query.type==1){
                    if(this.radio===""){
                             Toast('请选择货物状态');
                     }
                    if(this.cause===""){
                        Toast('请填写退款原因');
                    }
                    putRefund(this.uuid, this.cause, this.pay).then((response) => {
                        if (response.data.code == 2000) {
                            Toast('提交成功');
                        }
                    })
                }else {
                    if (this.cause === "") {
                        Toast('请填写退款原因');
                    } else {
                        putRefund(this.uuid, this.cause, this.pay).then((response) => {
                            if (response.data.code == 2000) {
                                Toast('提交成功');
                            }
                        })
                    }
                }
            },
            goodsType(){
                this.showType=true
            },
            typeOk(){
                this.showType=false
            },
            onClickLeft(){
                this.$router.go(-1);
            },
            causeOk(){
                this.showCause=false
            },
            causeType(){
                this.showCause=true
            }
        }
    }
</script>

<style scoped>

</style>